import React, { useState, useEffect } from 'react';
import { connect } from 'umi';
import { Input, Space, Card, Button, Form, Row, Col } from 'antd';
import { TOKEN_KEY, getCookie, getUseInfo, USER_INFO } from '@/utils/cookie.ts';
// import { getUseInfo,USER_INFO } from '@/utils/cookie';

import './card.less';

const PhoneChange = ({ dispatch }) => {
  const [form] = Form.useForm();
  const [newMail, setnewMail] = useState('');
  const [newPhone, setnewPhone] = useState('');
  const [info, setInfo] = useState([]);

  useEffect(() => {
    if (JSON.parse(getUseInfo(USER_INFO))) {
      setInfo(JSON.parse(getUseInfo(USER_INFO)));
    }
  }, [getUseInfo(USER_INFO)]);
  const newPhoneNum = e => {
    setnewPhone(e.target.value);
  };
  const newEmail = e => {
    setnewMail(e.target.value);
  };
  const upPhoneEmail = () => {
    dispatch({
      type: 'smManInforRule/upPhonemail',
      payload: {
        mail: newMail,
        phone: newPhone,
      },
      headers: {
        Authentication: getCookie(TOKEN_KEY),
      },
    });
  };

  return (
    <div className="site-card-border-less-wrapper">
      <Card bordered={false}>
        <div>
          之前手机号码:
          <span>{info.phone}</span>
        </div>
        <div>
          之前邮箱号:
          <span>{info.mail}</span>
        </div>
      </Card>
      <Card bordered={false} id="Card">
        <Space direction="vertical">
          <Form name="info" layout="vertical" form={form}>
            <Row>
              <Col span="24">
                <Form.Item label="新的手机号码" name="phone">
                  <Input
                    placeholder="请设置新的手机号码"
                    style={{ marginBottom: 15 }}
                    onChange={e => {
                      newPhoneNum(e);
                    }}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <Form.Item label="新的邮箱地址" name="mail">
                  <Input
                    placeholder="请设置新的邮箱地址"
                    style={{ marginBottom: 15 }}
                    onChange={e => {
                      newEmail(e);
                    }}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <Button
                  type="primary"
                  block
                  id="button"
                  onClick={() => {
                    upPhoneEmail();
                  }}
                >
                  确认
                </Button>
              </Col>
            </Row>
          </Form>
        </Space>
      </Card>
    </div>
  );
};

export default connect(({ loading }) => ({
  loading: loading.models.smManInforRule,
}))(PhoneChange);
